<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box {
			width: 200px;
			height: 100px;
			margin: 100px auto;
			position: relative;
			/* border-radius: 10px;
			overflow: hidden; */
		}

		@keyframes run1 {
			form {
				width: 0;
			}

			to {
				width: 100%;
			}
		}
		@keyframes run2 {
			form {
				height: 0;
			}

			to {
				height: 100%;
			}
		}

		.box1 {
			position: absolute;
			top: 0;
			right: 0;
			width: 0;
			height: 5px;
			background-color: blue;
			animation: run1 .3s forwards linear;
		}

		.box2 {
			position: absolute;
			left: 0;
			top: 0;
			width: 5px;
			height: 0;
			background-color: blue;
			animation: run2 .3s forwards linear;
			animation-delay: .3s;
		}

		.box3 {
			position: absolute;
			bottom: 0;
			left: 0;
			width: 0;
			height: 5px;
			background-color: blue;
			animation: run1 .3s forwards linear;
			animation-delay: .6s;
		}

		.box4 {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 5px;
			height: 0;
			background-color: blue;
			animation: run2 .3s forwards linear;
			animation-delay: .9s;
		}
		.card{
			position: absolute;
			width: calc(100% - 10px);
			height: calc(100% - 10px);
			top: 5px;
			left: 5px;
			background-color: #fff;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="box1"></div>
		<div class="box2"></div>
		<div class="box3"></div>
		<div class="box4"></div>
		<div class="card"></div>
	</div>
</body>

</html>